<template>
	<view>
		<an-nav-bar title="我的订单" @onBack="onBack" :onBack="true"> </an-nav-bar>
		<view class="order-type flex">
			<view class="order" :class="{'order-check':orderStatusIdx == index}" v-for="(item,index) in titleList" :key="index" @click="onTab(index)">
				<text>{{item.text}}</text>
			</view>
			<view class="order-line" :style="{'left':lineList[orderStatusIdx] + 'rpx'}"></view>
		</view>
		<view class="order-list" v-if="customerList.length">
			<view class="list" v-for="(item,index) in customerList" :key="index" @click="gotoUrl(item)">
				<view class="top flex_sw">
					<view class="order-num">订单号:{{item.sn}}</view>
					<view v-if="item.status" class="order-status">{{$common.orderStatus(item.status)}}</view>
				</view>
				<view class="center flex">
					<image class="logo" :src="imgUrl+item.projectImg" mode=""></image>
					<view class="info">
						<view class="name">{{item.projectName}}</view>
						<view class="text flex_sw">
							<view class="">时长：{{item.projectTime}}分钟</view>
							<view class="">x{{item.buyNum}}</view>
						</view>
						<view class="text flex_sw">
							<view class=""> 金额：￥{{item.sellPrice || 0}}</view>
							<view class="">￥{{item.totalPrice || 0}}</view>
						</view>
					</view>
				</view>
				<view class="btn flex">
					<view class="btn1" v-if="item.status == 'NO_PAY'" @click.stop="payOrder(item)">去付款</view>
					<view class="btn1" v-if="item.status == 'NO_PAY'" @click.stop="deleteOrder(item.sn)">删除订单</view>
					<view class="btn1" v-if="item.status == 'NO_ACCEPT'" @click.stop="cancelOrder(item.sn)">取消订单</view>
					<!-- <view class="btn2" v-if="item.status == 'NO_ACCEPT'">退款</view> -->
					<view class="btn2" v-if="item.status == 'NO_COMMENT'" @click.stop="$common.goPage('/pages/s/comment/create?id='+item.id)">评价</view>
				</view>
			</view>
		</view>
		<view class="order-list" v-if="!customerList.length">
			<view class="null-box">
				<image src="/static/null.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import indexConfig from '@/config/index.config';
	export default {
		data() {
			return {
				imgUrl: indexConfig.imgUrl,
				orderStatusIdx: 0,
				titleList: [{
					text: "全部",
					status: ""
				}, {
					text: "待支付",
					status: "NO_PAY"
				}, {
					text: "待接单",
					status: "NO_ACCEPT"
				}, {
					text: "待服务",
					status: "NO_SERVICE"
				}, {
					text: "服务中",
					status: "IN_SERVICE"
				}, 
				{
					text: "待评价",
					status: "NO_COMMENT"
				}, 
				{
					text: "已完成",
					status: "FINISH"
				}],
				lineList: [],
				customerList: []
			};
		},
		onLoad(options) {
			let that = this
			if (options.status) {
				this.orderStatusIdx = options.status
			} else {
				this.orderStatusIdx = 0
			}
			const query = uni.createSelectorQuery().in(this);
			this.$nextTick(() => {
				query.selectAll(".order").boundingClientRect(data => {
					data.forEach(item => {
						that.lineList.push(item.left * 2)
					})
				}).exec();
			})
			this.getList()
		},
		methods: {
			payOrder(item){
				uni.navigateTo({
					url: '/pages/pay/pay?id=' + item.sn + '&orderType=ORDER'
				})
			},
			onBack() {
				uni.switchTab({
					url: '/pages/tabbar/my'
				})
			},
			onTab(index) {
				this.orderStatusIdx = index
				this.getList()
			},
			cancelOrder(sn) {
				uni.showModal({
				    title: '温馨提示',
				    content: '确定取消订单吗',
				    success: (res) => {
				        if (res.confirm) {
							this.$http.post('/app/order/order/refund/' + sn).then(res => {
								uni.showToast({
									title: '操作成功',
									icon: 'success'
								});
								this.getList();
							})
				        } else if (res.cancel) {
				        }
				    }
				})
			},
			deleteOrder(sn){
				uni.showModal({
				    title: '温馨提示',
				    content: '确定删除订单吗',
				    success: (res) => {
				        if (res.confirm) {
							this.$http.post('/app/order/order/delete/' + sn).then(res => {
								uni.showToast({
									title: '操作成功',
									icon: 'success'
								});
								this.getList();
							})
				        } else if (res.cancel) {
				        }
				    }
				})
			},
			gotoUrl(item) {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?id=' + item.id
				})
			},
			getList() {
				let status = this.$common.orderStatus()
				this.$http.get('/app/order/order/customerList', {
					status: this.titleList[this.orderStatusIdx].status
				}).then(res => {
					this.customerList = res.rows
				})
			},
		}
	}
</script>

<style lang="scss">
	.order-list {
		padding: 100rpx 32rpx 32rpx;

		.list {
			width: 100%;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;

			.btn {
				justify-content: flex-end;

				>view {
					padding: 10rpx 34rpx;
					border-radius: 54rpx;
					font-size: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
					margin-left: 20rpx;
					border-width: 2px;
					border-style: solid;

					&:first-child {
						margin-left: 0rpx;
					}
				}

				.btn1 {
					border-color: #DEDEDE;
					color: #76787C;
				}

				.btn2 {
					border-color: #0CA27B;
					color: #ffffff;
					background-color: #0CA27B;
				}
			}

			.center {
				margin: 20rpx 0;
				height: 160rpx;

				.logo {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.info {
					flex: 1;
					height: 160rpx;

					.text {
						margin-bottom: 8rpx;
						height: 34rpx;

						>view {
							height: 34rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #76787c;
							line-height: 34rpx;
						}

						&:last-child {
							margin-bottom: 0;
						}
					}

					.name {
						height: 44rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
						line-height: 44rpx;
						margin-bottom: 16rpx;
					}
				}
			}

			.top {
				height: 40rpx;

				>view {
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
					text-align: LEFT;
					color: #76787c;
					line-height: 40rpx;
				}
			}
		}
	}

	.order-type {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		top: calc(var(--status-bar-height) + 88rpx);
		left: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
		z-index: 999;

		.order-line {
			width: 88rpx;
			height: 4rpx;
			background: #aa8050;
			position: absolute;
			bottom: 15rpx;
			transition: all .5s;
		}

		.order {
			width: 88rpx;
			text-align: center;
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #737373;
			line-height: 40rpx;
		}

		.order-check {
			font-weight: 700;
			color: #aa8050;
		}
	}
</style>
